Adding Roving Tabindex to the Date Picker

Desired Date Picker Interaction Pattern

In the last lesson, we looked at how different tabindex attribute values affect user interactivity with our page.

The current date picker implementation has a button for every day of the month, each with a tabindex of 0. This means that every button is focusable and reachable with the Tab key and the user would have to hit Tab many times in order to move on to different parts of the page.

The interaction we want is for the date picker to utilize roving tabindex.

It should only have only a single tab stop.

If the user Tabs into the date picker, they will use the Arrow keys to move around the day buttons. When the user Tabs again, they will move on to the next focusable element outside of the date picker control.

To achieve the desired result, we are going to use React’s state management to dynamically update the tabindex value of the day buttons and add Arrow key handling for moving between them.

Updating the Date Picker to Track tabindex

The first step in implementing roving tabindex is to add a state variable that will keep track of the date button’s tabIndex.

Conditionally Set tabIndex

Back at line 189 of date-picker.js where we added the hardcoded tabIndex value as a string, we’re instead going to replace it with an expression that will update it conditionally.

The value of tabIndex will be 0 if the currently focused date is the same as the date of the button we’re currently on. Otherwise, the tabIndex will be set to -1.

Here’s what the conditional looks like, using a ternary operator:

tabIndex={focusedDate === day.date ? '0' : '-1'}

We’ll create that focusedDate state variable in a moment.

Near line 175 of date-picker.js where the days of the week are mapped over, here’s what the returned button looks like now:

<button
	aria-disabled={day.isBooked ? 'true' : 'false'}
	aria-label={} // either the number or "already booked" or "selected"
	aria-selected={isDaySelected(day) ? 'true' : 'false'}
	className={...}
	onClick={() => selectDay(day)}
	tabIndex={focusedDate === day.date ? '0' : '-1'}
>

<button
	aria-disabled={day.isBooked ? 'true' : 'false'}
	aria-label={} // either the number or "already booked" or "selected"
	aria-selected={isDaySelected(day) ? 'true' : 'false'}
	className={...}
	onClick={() => selectDay(day)}
	tabIndex={focusedDate === day.date ? '0' : '-1'}
>

Tracking the Focused Date in State

We need to keep track of which date the user has focused in the DatePicker component. React or similar libraries make this so much easier than handling every bit of logic manually!

Scrolling up toward the top of the component, we’ll set up the logic for tracking focusedDate in state.

Get the First Date in the Calendar

Our initial state for the focusedDate is going to be whatever the first date is in the calendar. We can get it from the first item in the datesArray that has already been created in the component.

Here’s the line of code that grabs that first date:

const firstFocusedItemDate = datesArray[0]

const firstFocusedItemDate = datesArray[0]

Store firstFocusedItemDate in Component State

Now that we have a firstFocusedItemDate we’ll store it in component state using React’s useState hook.

This is where we’ll create the focusedDate variable we used in our button for the tabIndex

along with a setFocusedDate function to update it in a useState hook. We’ll also initialize it with our firstFocusedItemDate to set a default value.

const [focusedDate, setFocusedDate] = useState(firstFocusedItemDate)

const [focusedDate, setFocusedDate] = useState(firstFocusedItemDate)

Set up React refs for the Date Buttons

The useRef hook is one of the more common features you’ll use when dealing with focus management in React.

We’ll go further into it shortly. For now we’ll create a buttonRefs variable and set it to the result of passing an empty array into useRef.

Recapping What We’ve Done so Far

We have created a focusedDate variable in the component’s state that is set to the first date in the calendar. We also updated the rendered date buttons to set a tabindex value of 0 if one matches the current focusedDate, or -1 if it doesn’t.

Since you can only Tab to items that have a tabindex of 0, there will only be one date in the date picker that can be reached with the Tab key. Hitting Tab again will take the user to the next focusable element.

Here is the logic we implemented:

const firstFocusedItemDate = datesArray[0]
const [focusedDate, setFocusedDate] = useState(firstFocusedItemDate)
const buttonRefs = useRef([])

const firstFocusedItemDate = datesArray[0]
const [focusedDate, setFocusedDate] = useState(firstFocusedItemDate)
const buttonRefs = useRef([])

And here is that button markup again:

<button
  aria-disabled={day.isBooked ? 'true' : 'false'}
  aria-label={} // either the number or "already booked" or "selected"
  aria-selected={isDaySelected(day) ? 'true' : 'false'}
  className={...}
  onClick={() => selectDay(day)}
  tabIndex={focusedDate === day.date ? '0' : '-1'}
>

<button
  aria-disabled={day.isBooked ? 'true' : 'false'}
  aria-label={} // either the number or "already booked" or "selected"
  aria-selected={isDaySelected(day) ? 'true' : 'false'}
  className={...}
  onClick={() => selectDay(day)}
  tabIndex={focusedDate === day.date ? '0' : '-1'}
>

If we save our work and refresh the page, we can see that this code works as expected!

Implement Arrow Key Handling in the Date Picker

Now that users can Tab into the date picker as one tab stop, we need to enable Arrow key navigation to make the whole thing functional again.

Writing the handleKeyUp Function

We need to write handler functions that will respond to DOM keyup events. For our implementation, we’ll work within React’s Synthetic Event system using our custom handler code.

Create a JavaScript function called handleKeyUp that accepts event as an argument.

Inside the function, stub out a series of if/else statements that check if event.key (the string name of the key being pressed) is either ArrowRight, ArrowLeft, ArrowDown or ArrowUp. You can always use a console.log(event) statement inside the function to help figure out .key string names and other event details.

const handleKeyUp = (event) => {
  if (event.key === 'ArrowRight') {

  }
  else if (event.key === 'ArrowLeft') {

  }
  else if (event.key === 'ArrowDown') {

  }
  else if (event.key === 'ArrowUp') {

  }
}

const handleKeyUp = (event) => {
  if (event.key === 'ArrowRight') {

  }
  else if (event.key === 'ArrowLeft') {

  }
  else if (event.key === 'ArrowDown') {

  }
  else if (event.key === 'ArrowUp') {

  }
}

Creating Button Refs

Refs are a key React (and Vue) feature that will give us the ability to move focus to the next button using the Arrow keys. Refs give us an escape hatch from Synthetic Event and React library land into raw DOM nodes where we can make JavaScript event calls like .focus().

Using code like buttonRef.current, we could target a specific DOM element as opposed to a React object. (If you’ve ever worked with jQuery, it had a similar feel with jQuery objects vs. raw DOM nodes.)

Earlier we created a buttonRefs variable that we initialized to an empty array. I did it this way because I didn’t want to manually create variables for every button in the calendar. Managing 30+ buttonRef variables individually would be quite a chore, if you could do it at all!

Instead we’ll update the button markup to include a ref attribute that will dynamically push the current element ref (a reference to a DOM element) onto the buttonRefs array.

While we’re here, we’ll also add in the onKeyUp event handler by setting it to (event) => handleKeyUp(event)

The button markup now looks like this:

// Reacall that the buttons are created when we map over the weeks of the month

<button
	aria-disabled={day.isBooked ? 'true' : 'false'}
	aria-label={...}
	aria-selected={...}
	className={...}
	data-date={...}
	onClick={() => selectDay(day)}
	onKeyUp={(event) => handleKeyUp(event)}
	ref={elementRef => {buttonRefs.current.push(elementRef)}}
	tabIndex={focusedDate === day.date ? '0' : '-1'}
>

// Reacall that the buttons are created when we map over the weeks of the month

<button
	aria-disabled={day.isBooked ? 'true' : 'false'}
	aria-label={...}
	aria-selected={...}
	className={...}
	data-date={...}
	onClick={() => selectDay(day)}
	onKeyUp={(event) => handleKeyUp(event)}
	ref={elementRef => {buttonRefs.current.push(elementRef)}}
	tabIndex={focusedDate === day.date ? '0' : '-1'}
>

Writing a focusDayByIndex Function

Now that we have refs to each button in the calendar in an array, we can write a function to move focus as the user navigates with the Arrow keys through the date grid.

This focusDayByIndex function will take in the index of the item in the buttonRefs array that will be focused.

buttonRefs.current is an array of DOM node refs that we can use to access the item at the index we passed in. Because each item returns a raw DOM node, we can call .focus() from the DOM API in order to give it focus:

const focusDayByIndex(index) => {
	buttonRefs.current[index].focus()
}

const focusDayByIndex(index) => {
	buttonRefs.current[index].focus()
}

🛠 Challenge: Write the Logic to Update the Focused Date Based on Arrow Key events.

For this challenge, your goal is to update the currently focused day depending on what Arrow key the user hits.

Fill in the logic for each of the Arrow key events. Essentially, each press of an Arrow key will move through the dates in the Array to execute roving tabindex in the date buttons. The array contains unformatted dates like this: [2022-07-01, 2022-07-02, 2022-07-03, ...]

If the user Arrows left or right, you’ll need to decrement or increment by 1 index in the array for moving a day behind or ahead. If they move up or down, you’ll need to decrement or increment by 7 places in the array for the number of days in a week.

Keep in mind that the date index has to be within the bounds of the calendar, so it won’t throw an error for a nonexistent date!

Hints:

You can get the button’s date from a data attribute by using event.target.dataset.date. This works because event.target references the element that dispatched the event, which in this case is the button inside of the calendar. The dataset.date part pulls the date of the calendar button from its data-date attribute in the markup.

You can get the index of a date in the dates array by calling datesArray.indexOf() and passing in a date.

Set the focused date by passing a date into setFocusedDate(), which will cause a re-render of the date grid including automatic updating of tabindex attribute values.

🛠 Solution: Updating the Focused Date

For the first line inside of the handleKeyUp function, we’ll create a buttonDate variable and assign it the value of event.target.dataset.date. This will give us a starting point for our dates based on the date button element keyed upon by the user.

Then we’ll create another variable for the current date’s index in the datesArray.

let buttonDate = event.target.dataset.date
let buttonDateIndex = datesArray.indexOf(buttonDate)

let buttonDate = event.target.dataset.date
let buttonDateIndex = datesArray.indexOf(buttonDate)

Now we’ll write the logic for each of the Arrow key events.

Handling the ArrowRight Key

If someone hits the right Arrow key, they are moving one day forward in the calendar.

We’ll create a nextDayNum variable and assign it to buttonDateIndex + 1 to increment one place in the array.

We also need to dome some checking to make sure that our index is within the bounds of the date array. For example, if we are on the last day of the month then buttonDateIndex + 1 will cause an error without logic to prevent it.

So we’ll add an if statement that checks whether a number is within the length of the array: nextDayNum < datesArray.length.

As long as we’re in bounds for the month, we can move forward with setting the focused date to the nextDayNum.

Here’s what the code for handing the right Arrow key looks like:

const handleKeyUp = (event) => {
  let buttonDate = event.target.dataset.date
  let buttonDateIndex = datesArray.indexOf(buttonDate)
	
  // if date + 1 is within days array, go to next button
	if (event.key === 'ArrowRight') {
		let nextDayNum = buttonDateIndex + 1
		if (nextDayNum < datesArray.length) {
			setFocusedDate(datesArray[nextDayNum])
			focusDayByIndex(nextDayNum)
		}
	}
...

const handleKeyUp = (event) => {
  let buttonDate = event.target.dataset.date
  let buttonDateIndex = datesArray.indexOf(buttonDate)
	
  // if date + 1 is within days array, go to next button
	if (event.key === 'ArrowRight') {
		let nextDayNum = buttonDateIndex + 1
		if (nextDayNum < datesArray.length) {
			setFocusedDate(datesArray[nextDayNum])
			focusDayByIndex(nextDayNum)
		}
	}
...

Handling the Rest of the Arrow Keys

The logic for handling the rest of the Arrow keys is fairly similar to what we did for the ArrowRight key.

For the left Arrow, we’ll make sure date - 1 is in bounds.

For the up and down Arrows, we’ll look for date - 7 and date + 7 to be in bounds.

The finalized code for handling the Arrow keys looks like this:

const handleKeyUp = (event) => {
  let buttonDate = event.target.dataset.date
  let buttonDateIndex = datesArray.indexOf(buttonDate)
  // if date + 1 is within days array, go to next button
  if (event.key === 'ArrowRight') {
      let nextDayNum = buttonDateIndex + 1
      if (nextDayNum < datesArray.length) {
          setFocusedDate(datesArray[nextDayNum])
          focusDayByIndex(nextDayNum)
      }
  }
  // if date - 1 is within days array, go to previous button
  else if (event.key === 'ArrowLeft') {
      let previousDayNum = buttonDateIndex - 1
      if (previousDayNum >= 0) {
          setFocusedDate(datesArray[previousDayNum])
          focusDayByIndex(previousDayNum)
      }
  }
  // if date + 7 is within days array, go to next week
  else if (event.key === 'ArrowDown') {
      let nextWeekNum = buttonDateIndex + 7
      if (datesArray[nextWeekNum]) {
          setFocusedDate(datesArray[nextWeekNum])
          focusDayByIndex(nextWeekNum)
      }
  }
  // if date - 7 is within days array, go to previous week
  else if (event.key === 'ArrowUp') {
      let previousWeekNum = buttonDateIndex - 7
      if (datesArray[previousWeekNum]) {
          setFocusedDate(datesArray[previousWeekNum])
          focusDayByIndex(previousWeekNum)
      }
  }
}

const handleKeyUp = (event) => {
  let buttonDate = event.target.dataset.date
  let buttonDateIndex = datesArray.indexOf(buttonDate)
  // if date + 1 is within days array, go to next button
  if (event.key === 'ArrowRight') {
      let nextDayNum = buttonDateIndex + 1
      if (nextDayNum < datesArray.length) {
          setFocusedDate(datesArray[nextDayNum])
          focusDayByIndex(nextDayNum)
      }
  }
  // if date - 1 is within days array, go to previous button
  else if (event.key === 'ArrowLeft') {
      let previousDayNum = buttonDateIndex - 1
      if (previousDayNum >= 0) {
          setFocusedDate(datesArray[previousDayNum])
          focusDayByIndex(previousDayNum)
      }
  }
  // if date + 7 is within days array, go to next week
  else if (event.key === 'ArrowDown') {
      let nextWeekNum = buttonDateIndex + 7
      if (datesArray[nextWeekNum]) {
          setFocusedDate(datesArray[nextWeekNum])
          focusDayByIndex(nextWeekNum)
      }
  }
  // if date - 7 is within days array, go to previous week
  else if (event.key === 'ArrowUp') {
      let previousWeekNum = buttonDateIndex - 7
      if (datesArray[previousWeekNum]) {
          setFocusedDate(datesArray[previousWeekNum])
          focusDayByIndex(previousWeekNum)
      }
  }
}

Troubleshooting Arrow Key Handling

If you’ve followed along with the text so far, the code above all works.

However, there was some troubleshooting involved that you can watch in the video.

The first step I took was to verify that the key events were being recognized properly by logging out event.key in the handleKeyUp function.

When I verified that they were, I discovered there must be an issue with the button markup as the pattern wasn’t quite working yet.

It ended up that the actual buttonDate wasn’t being set, which is the way to tell which button is the active one. Updating the buttons to include the data-date attribute is ultimately what fixed everything.

Overriding Browser Scrolling from Up and Down Arrows

To make it so the up and down Arrows don’t scroll the page, we’ll write a keyDown handler that overwrites the default behavior of the keys.

Writing the handleKeyDown Function

The first thing we need to is add an onKeyDown to the button markup. Similar to the onKeyUp handler we wrote, onKeyDown will call the handleKeyDown function we’re about to write.

Back up near the top of the file where we wrote our handleKeyUp function, create a new function for handleKeyDown that also takes in the event.

This time instead of writing an if-elsestatement, I’m going to write a switch statement that will look at what event.key is and act accordingly.

We can take advantage of the switch’s feature where multiple cases can run the same code. We need to prevent the default behavior of both the up and down Arrows.

When we’re done, we can break out of the switch.

Here’s what it looks like all together:

const handleKeyDown = (event) => {
	switch (event.key) {
		case 'ArrowUp':
		case 'ArrowDown':
			event.preventDefault()
			break
	}
}

const handleKeyDown = (event) => {
	switch (event.key) {
		case 'ArrowUp':
		case 'ArrowDown':
			event.preventDefault()
			break
	}
}

Now when the up and down Arrow keys are used to navigate through the weeks, the browser scroll will no longer scroll around!